<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div
          style="
            width: 300px;
            display: flex;
            align-items: center;
            margin-left: 10px;
          "
        >
          <svg-icon class="primary" :icon-class="$route.meta.icon" />
          <span style="margin-left: 5px" class="primary">{{
            $route.meta.title
          }}</span>
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            width: 100%;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              overflow: hidden;
              height: 41px;
            "
          >
            <div class="report_header_query">
              <el-input
                prefix-icon="el-icon-search"
                placeholder="请输入广告名"
                v-model="query.name"
              ></el-input>
            </div>
          </div>
          <el-button
            style="margin-left: 10px; margin-top: 5px"
            size="small"
            type="primary"
            @click="queryClick"
            >查询</el-button
          >
          <el-button
            style="margin-left: 10px; margin-top: 5px"
            size="small"
            type="primary"
            @click="addClick"
            v-permission="['adPosition.add']"
            >新增</el-button
          >
        </div>
      </div>
    </el-header>
    <div class="pd10">
      <el-table
        :data="adPositionData"
        border
        stripe
        v-loadMore="[payLoads, 'bank-list']"
        :height="curHeight"
        ref="table"
        style="width: 100%"
        :key="times"
      >
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column label="广告ID  " align="left" prop="id" width="80">
        </el-table-column>
        <el-table-column
          label="广告位名  "
          align="left"
          prop="name"
     
        >
        </el-table-column>

        <el-table-column label="广告位说明" align="left" prop="memo">
        </el-table-column>

        <el-table-column
          label="创建时间"
          align="left"
          prop="createDate"
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createDate | datetimeFormatter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              v-permission="['adPosition.edit']"
              placement="top-start"
            >
              <a @click="editClick(scope.row)">
                <i style="color: #409eff" class="el-icon-edit"></i>
              </a>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              v-permission="['adPosition.del']"
              placement="top-start"
            >
              <a style="margin-left: 10px" @click="deleteadPosition(scope.row)">
                <i style="color: #f56c6c" class="el-icon-delete"></i>
              </a>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-footer class="el-footerBox">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="loadadPosition"
      ></pagination>
    </el-footer>
  </el-container>
</template>
<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { list, del, update } from "@/api/adPosition";
import utils from "../../utils/utils.js";
import { EventBus } from "@/api/eventBus";
import Pagination from "@/components/Pagination";
import loadMore from "@/utils/loadMore.js";
export default {
  name: "adPosition-list",
  directives: {
    permission,
    loadMore,
  },
  data() {
    return {
      times: null,
      adPositionData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      queryType: true,
      query: {
        name: "",
      },
      curHeight: null,
      payLoads: "",
    };
  },
  components: {
    Pagination,
  },
  created() {
    this.loadadPosition();
    EventBus.$on("adPosition-add", (res) => {
      // 监听新增完毕
      // 更新列表数组
      console.log(res);
      this.times = new Date().getSeconds();
      // this.adPositionData.unshift(res);
      this.loadadPosition()
    });
    EventBus.$on("adPosition-edit", (res) => {
      // 监听新增完毕
      // 更新列表数组
      for (let i = 0; i < this.adPositionData.length; i++) {
        if (this.adPositionData[i].id == res.id) {
          this.times = new Date().getSeconds();
          this.$set(this.adPositionData, i, res);
        }
      }
    });
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  filters: {},
  activated() {
    this.payLoads = new Date().getTime();
  },

  methods: {
    beforeMount() {
      var _this = this;
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 266; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 220; //减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220; //减去页面上固定高度height
    },
    queryClick() {
      this.pageNum = 1;
      this.loadadPosition();
    },
    addClick() {
      this.$router.push({
        path: "/adPositionte/add",
      });
    },
    loadadPosition() {
      this.times = new Date().getSeconds();
      console.log(this.times);
          let params = new URLSearchParams();
          params.append("pageNum", this.pageNum);
          params.append("pageSize", this.pageSize);
          params.append("name", this.query.name);
      list(params)
        .then((response) => {
          console.log(response);
      

          this.adPositionData = response.data.data;
          console.log(this.adPositionData);

          this.total = response.data.total;
          console.log(total);
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    editClick(row) {
      console.log(row);

      this.$router.push({
        path: "/adPosition/edit",
        query: {
          id: row.id,
        },
      });
    },
    deleteadPosition(data) {
      console.log(data);
      var _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(data.id)
            .then((response) => {
              console.log(response);
              if (response.type)
                // 更新列表数组
                _this.adPositionData.forEach(function (item, index) {
                  if (item.id == data.id) {
                    _this.adPositionData.splice(index, 1);
                  }
                });
            })
            .catch((error) => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #f2f2f2;
}

.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}
.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409eff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
</style>
